import { useSearchParams, useNavigate } from "react-router-dom"
import { useEffect, useState } from "react"
import { DemoBlock, lorem } from "demos"
import { Button, List, NoticeBar, Space } from "antd-mobile"
import { ICinema } from "@/types"
import { get } from "@/utils/request"

export default function Login() {
  // 获取传递过来的影院信息数据
  const [search] = useSearchParams()
  const cinemaInfo: ICinema = JSON.parse(search.get("info")!)
  const [moviePlanList, setMoviePlanList] = useState([])

  useEffect(() => {
    async function fetchPlanList(cid: number) {
      const res = await get("/movie/cinemainfo", { cid: cinemaInfo.cid })
      if (res.code === 0) {
        setMoviePlanList(res.data)
        setCurMovie(res.data[1])
        // setCurScreenList(res.data[1])
      }
    }
    fetchPlanList()
  }, [])

  // 当前影片
  const [curMovie, setCurMovie] = useState({})
  const [screenList, setScreenList] = useState([])
  // 当前影片点击事件
  const handleCurMovieClick = async (item: any) => {
    setCurMovie(item)
    // 发送请求获取放映厅数据
    const res = await get("/movie/cinemamovieinfo", {
      cid: cinemaInfo.cid,
      mid: item.mid,
    })
    if (res.code === 0) {
      setScreenList(res.data)
    }
  }
  // 获取影片的放映厅计划
  const [curScreenList, setCurScreenList] = useState([])
  const handleShowScreen = date => {
    setCurScreenList(screenList.filter(v => v.date === date)[0].list)
    console.log(screenList)
  }

  // 购票跳转到选座页面
  const navigate = useNavigate()
  const handleBuyTicket = (sid: number) => {
    navigate("/seats", {
      state: {
        sid,
      },
    })
  }

  return (
    <div>
      {/* 影院公告 */}
      <NoticeBar
        extra={<Space style={{ "--gap": "12px" }}></Space>}
        content={`${cinemaInfo.name}/${cinemaInfo.type}`}
        color='alert'
      />
      {/* 影院信息 */}
      <div className='text-sm justify-between items-center  p-4'>
        <p className='text-lg font-bold'>{cinemaInfo.name}</p>
        <p className=''>{cinemaInfo.address}</p>
        <p className='text-gray-400'>{cinemaInfo.type}</p>
      </div>
      {/* 影院排片 */}
      <div className='flex overflow-x-auto bg-amber-950'>
        {moviePlanList.map(item => {
          return (
            <img
              style={{
                transform: `scale(${item.mid === curMovie.mid ? 1.2 : 1})`,
                transformOrigin: "bottom",
              }}
              className='w-24 h-38 m-3'
              src={`http://127.0.0.1:5000/upload${item.cover}`}
              key={item.mid}
              onClick={() => handleCurMovieClick(item)}
              alt=''
            />
          )
        })}
      </div>
      {/* 当前影片信息 */}
      <div className='text-center text-base font-normal p-2'>
        <p>
          <span className='font-black text-xl m-1'>{curMovie.name}</span>
          电影评分{curMovie.point}
        </p>
        <p>
          {curMovie.duration}分钟 / {curMovie.type} / {curMovie.actors}
        </p>
      </div>
      {/* 影片日期 */}
      <div className='flex justify-around text-[25px] border-y border-gray-200 border-solid p-2'>
        {screenList
          .map(v => v.date)
          .map(v => (
            <p onClick={() => handleShowScreen(v)} key={v}>
              {v}
            </p>
          ))}
      </div>
      {/* 影片场次 */}
      <List>
        {curScreenList.map(item => {
          return (
            <List.Item>
              <div key={item.sid} className='item flex justify-between items-center text-center'>
                <div className='w-1/4'>
                  <p className='text-xl font-bold'>{item.starttime}</p>
                  <p>{item.endtime}散场</p>
                </div>
                <div className='text-sm w-1/4'>
                  <p>{item.name}</p>
                  <p>{item.type}</p>
                </div>
                <p className='w-1/4 text-xl font-bold text-red-500'>￥{item.price}</p>
                <button
                  className='w-1/5 text-red-500 font-bold text-base border-2 border-red-500 rounded-2xl'
                  onClick={() => handleBuyTicket(item.sid)}
                >
                  购票
                </button>
              </div>
            </List.Item>
          )
        })}
      </List>
    </div>
  )
}
